<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">数学咨询 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">在线课程开发</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">1对1课程</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">线下金课</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">混合式金课</a>
              </li>
              <li class="nav-item">
                <a class="nav-link">虚拟仿真金课</a>
              </li>
              <li class="nav-item">
                <a class="nav-link">信息化教学</a>
              </li>
          </ul>
        </div>
      </nav>
    <div class="container mt-4">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="img/1.jpg" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="img/2.jpg" class="d-block w-100" alt="...">
              </div>
            </div>
            <a class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          <div class="row">

              <div class="col-md-4 mt-4">
                <div class="accordion" id="accordionExample">
                    <div class="card">
                        <div class="card-header">
                          <a href="" data-toggle="collapse" data-target="#collapseOne">企业介绍</a> 
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body">
                                <div class="card" style="width: 18rem;">
                                    <img src="img/bgcs.jpg" class="card-img-top" alt="...">
                                    <div class="card-body">
                                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                    </div>
                                  </div>
                            </div>
                          </div>
                       
                    </div>
                    <div class="card">
                        <div class="card-header">
                          <a href="" data-toggle="collapse" data-target="#collapseTwo">服务客户列表</a> 
                        </div>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                            <div class="card-body">
                                <ul class="list-group">
                                    <li class="list-group-item">An item</li>
                                    <li class="list-group-item">A second item</li>
                                    <li class="list-group-item">A third item</li>
                                </ul>
                            </div>
                          </div>
                       
                    </div>
                  </div>
              </div>
              <div class="col-md-8 mt-4">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                      <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab">教育技术金课</a>
                      <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab">教学能力金课</a>
                    </div>
                  </nav>
                  <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <div class="card">
                            <img src="img/tb1.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                              <h5 class="card-title">微课设计与开发技术<span class="badge badge-secondary">好评4300</span></h5>
                              <p class="card-text">
                                Placeholder content for the tab panel. 
                                This one relates to the home tab. 
                                Takes you miles high, so high, 
                                'cause she’s got that one international smile. 
                                There's a stranger in my bed, 
                                there's a pounding in my head. Oh, no. 
                                In another life I would make you stay.
           
                              </p>
                              <a href="#" class="btn btn-link text-danger float-right">马上学习</a>
                            </div>
                          </div>
                    </div>
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        <div class="card">
                            <img src="img/tb2.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                              <h5 class="card-title">微课设计与开发技术<span class="badge badge-secondary">好评4300</span></h5>
                              <p class="card-text">
                                Placeholder content for the tab panel. 
                                This one relates to the home tab. 
                                Takes you miles high, so high, 
                                'cause she’s got that one international smile. 
                                There's a stranger in my bed, 
                                there's a pounding in my head. Oh, no. 
                                In another life I would make you stay.
           
                              </p>
                              <a href="#" class="btn btn-link text-danger float-right">马上学习</a>
                            </div>
                          </div>
                    </div>
                  </div>

              </div>
          </div>
    </div>
    <div class="text-center bg-dark text-light mt-4">
        <p class="mb-0 p-2">版权所有&copy;河南水利与环境职业学院***</p>
    </div>
</body>
</html>